<template>
  <div>
    <a-tree-select
      :disabled="disabled"
      :search-value.sync="searchValue"
      v-model="treeSelectValue"
      :dropdown-style="{ maxHeight: '500px', overflow: 'auto' }"
      :tree-data="treeDataComputed"
      :placeholder="placeholder || '选择行业'"
      :showCheckedStrategy="TreeSelect.SHOW_CHILD"
      multiple
      tree-checkable
      :filterTreeNode="filterTreeNode"
      allow-clear
      @change="handleChange"
    >
    </a-tree-select>
  </div>
</template>

<script>
import { TabtreeData } from '@/utils/treeutil'
import { TreeSelect } from 'ant-design-vue'

export default {
  props: ['value', 'disabled', 'placeholder', 'treeData'],
  computed: {
    treeDataComputed() {
      if (!this.treeData) return []
      return TabtreeData(
        this.treeData.map(item => ({
          ...item,
          parentCode: item.parentCode || 0,
          title: item.name,
          key: item.id,
          value: item.id
        })),
        'code',
        'parentCode',
        'children',
        '0'
      )
    }
  },
  watch: {
    value: {
      handler(val) {
        this.treeSelectValue = val
      },
      deep: true,
      immediate: true
    }
  },

  data() {
    return {
      searchValue: '',
      TreeSelect,
      treeSelectValue: []
    }
  },
  methods: {
    filterTreeNode(searchKeys, node) {
      const regex = new RegExp(searchKeys, 'i')
      return regex.test(node.data.props.title)
    },
    handleChange(value) {
      this.$emit('change', value)
      this.$emit('input', value)
    },
    onSearch() {},
    onSelect() {}
  }
}
</script>
<style lang="less">

</style>
